<template>
  <view class="content">
    <uni-nav-bar
      title="欧气券"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view
      v-if="pageData"
      class="hd-card common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc160.png')})`
      }"
    >
      <view class="title">幸运币数量</view>

      <view class="num">
        <view class="icon">
          <image :src="$img('/static/img2/cc159.png')" lazy-load></image>
        </view>

        {{ pageData.user_integral }}
      </view>

      <view class="join">
        <view class="icon">
          <image :src="$img('/static/img2/cc170.png')" lazy-load></image>
        </view>

        今日已参与
        <text>{{ pageData.y_count }}/{{ pageData.z_count }}</text>
      </view>

      <view class="big-coin">
        <image :src="$img('/static/img2/cc159.png')" lazy-load></image>
      </view>
    </view>

    <scroll-view class="tab" scroll-x>
      <view
        class="tab-item common_bg"
        v-for="(item, i) in tabList"
        :key="i"
        :class="{
          act: tabCur == i
        }"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc148.png')})`
        }"
        @click="tabChange(i)"
      >
        <text>
          {{ item.title }}
        </text>
      </view>
    </scroll-view>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="list">
        <view
          class="list-item"
          v-for="(item, i) in listData"
          :key="i"
          @click="handelClick(item, i)"
        >
          <view
            v-if="tabList[tabCur].id == 1 && item.level > 2"
            class="check icon"
          >
            <image
              v-if="item.choose"
              :src="$img('/static/img2/cc44.png')"
              lazy-load
            ></image>

            <image
              v-else
              :src="$img('/static/img2/cc45.png')"
              lazy-load
            ></image>
          </view>

          <view class="coin">
            <image :src="item.level_img" mode="aspectFit" lazy-load></image>
          </view>

          <view class="info">
            <view class="title">{{ item.title }}</view>

            <view class="open-num">{{ item.num }}幸运币</view>

            <view class="num">需要{{ item.kl_num2 }}个参与者</view>
          </view>

          <view v-if="tabList[tabCur].id == 1" class="share-btn relative">
            <button
              class="hide"
              open-type="share"
              :data-item="item"
              @click.stop
            ></button>

            <image :src="$img('/static/img2/cc169.png')" lazy-load></image>

            <!-- 立即分享 -->
          </view>

          <view v-else-if="tabList[tabCur].id == 2" class="share-ing">
            <view class="share-num">
              <text>
                {{ item.yi_ling == item.kl_num2 ? '已结束' : '分享中' }}
              </text>

              {{ item.yi_ling }}/{{ item.kl_num2 }}
            </view>

            <view class="progress">
              <cmd-progress
                :percent="(item.yi_ling / item.kl_num2) * 100"
                :show-info="false"
                stroke-color=" linear-gradient(90deg, #E4690D 0%, #E40D1D 100%)"
                :strokeWidth="5"
              ></cmd-progress>
            </view>
          </view>

          <view v-else-if="tabCur == 3" class="share-end">已结束</view>
        </view>
      </view>
    </mescroll-body>

    <view
      v-if="tabList[tabCur].id == 1 && pageData"
      class="mix-fixed common_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc165.png')})`
      }"
    >
      <view class="title">
        <text>合并大礼包</text>
      </view>

      <view class="rule">
        赏包最多{{ pageData && pageData.ke_hc_count }}个合并1个,合成将损耗{{
          pageData && pageData.sun_hao
        }}幸运币!
      </view>

      <view class="coin-num">
        总幸运币:{{ (mixData && mixData.sum_num) || 0 }} 将合成:{{
          (mixData && mixData.coupon.title) || '普通赏券'
        }}(幸运币{{ (mixData && mixData.sh_num) || 0 }})
      </view>

      <view class="btn-lsit">
        <view class="btn" @click="chooseAll">
          <image :src="$img('/static/img2/cc166.png')" lazy-load></image>
          <!-- 全选 -->
        </view>

        <view class="btn" @click="cancelAll">
          <image :src="$img('/static/img2/cc167.png')" lazy-load></image>
          <!-- 取消 -->
        </view>

        <view
          class="btn c_bg large"
          :style="{
            backgroundImage: `url(${$img('/static/img2/cc168.png')})`
          }"
          @click="$c.noDouble(submitMix)"
        >
          合成
          <text>(已选{{ chooseNum }}件)</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      tabList: [
        {
          id: 1,
          title: '未分享'
        },
        {
          id: 2,
          title: '已分享'
        }
      ],
      tabCur: 0,
      pageData: '',
      listData: [],
      mixData: '',
      canReload: false
    }
  },

  computed: {
    chooseNum() {
      if (this.listData.length <= 0) {
        return 0
      }

      if (this.tabList[this.tabCur].id != 1) {
        return 0
      }

      const arr = this.listData.filter(item => item.choose)
      return arr.length
    }
  },

  async onShareAppMessage(e) {
    const item = e.target.dataset.item
    const userInfo = uni.getStorageSync('userinfo')
    await this.beforeShare(item.id)

    return {
      title: `快来领取${userInfo.nickname}分享的${item.num}幸运币的${item.title}`,
      imageUrl: item.level_img,
      path:
        '/pages/user/index' +
        this.$c.qs({
          ou_coupon_id: item.id
        })
    }
  },

  onLoad(options) {
    if (options.type) {
      this.tabCur = options.type
    }
  },

  onShow() {},

  methods: {
    beforeShare(coupon_id) {
      return new Promise((resolve, reject) => {
        this.req({
          url: 'coupon_share',
          data: {
            coupon_id
          },
          success: res => {
            if (res.status == 1) {
              this.mescroll.resetUpScroll()
              this.mescroll.scrollTo(0, 0)

              resolve()
            }
          }
        })
      })
    },

    submitMix() {
      let arr = this.listData.filter(item => item.choose).map(item => item.id)

      if (arr.length < 2) {
        this.$c.toast({
          title: '请最少选择两个赏券合成'
        })
        return
      }

      this.req({
        url: 'coupon_synthesis',
        data: {
          coupon_ids: arr.join(',')
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.tabChange(this.tabCur)
              }
            })
          }
        }
      })
    },

    confirmMix() {
      let arr = this.listData.filter(item => item.choose).map(item => item.id)

      if (arr.length < 2) {
        this.mixData = ''
        return
      }

      this.req({
        url: 'coupon_ji_suan',
        data: {
          coupon_ids: arr.join(',')
        },
        success: res => {
          if (res.status == 1) {
            this.mixData = res.data
          }
        }
      })
    },

    cancelAll() {
      if (this.tabList[this.tabCur].id != 1) {
        return
      }

      this.listData.map(item => {
        item.choose = false
      })

      this.confirmMix()
    },

    chooseAll() {
      if (this.tabList[this.tabCur].id != 1) {
        return
      }

      let arr = this.listData
        .map((item, i) => {
          return {
            index: i,
            level: item.level
          }
        })
        .filter(item => item.level > 2)
      let arr1 = null

      /* 如果可合成赏券数量大于限制数量 */
      if (arr.length > this.pageData.ke_hc_count) {
        /* 截取等于限制数量的赏券 */
        arr1 = arr.splice(0, this.pageData.ke_hc_count)
      }

      // console.log(arr)

      /* 如果截取了赏券数据 */
      if (arr1) {
        /* 由上往下依次选中 */
        arr1.map(item => {
          this.listData[item.index].choose = true
        })

        /* 清除到之前选中的赏券,防止多选 */
        arr.map(item => {
          this.listData[item.index].choose = false
        })

        /* 如果没有截取 */
      } else {
        /* 默认全部选中 */
        arr.map(item => {
          this.listData[item.index].choose = true
        })
      }

      this.confirmMix()
    },

    handelClick(item, i) {
      if (this.tabList[this.tabCur].id == 1) {
        if (item.level <= 2) {
          this.$c.toast({
            title: '该券不可合成'
          })
          return
        }

        let arr = this.listData.filter(item => item.choose)

        if (arr.length >= this.pageData.ke_hc_count && !item.choose) {
          this.$c.toast({
            title: `赏包最多可选${this.pageData.ke_hc_count}个`
          })
          return
        }

        item.choose = !item.choose
        this.confirmMix()

        return
      }

      this.$c.to({
        url: '/package/mine/coupon-detail',
        query: {
          id: item.id
        }
      })
    },

    tabChange(i) {
      this.tabCur = i
      this.listData = []

      this.mescroll.resetUpScroll()
      this.mescroll.scrollTo(0, 0)
    },

    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'coupon_list',
        data: {
          page: num,
          type: this.tabList[this.tabCur].id
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (this.tabList[this.tabCur].id == 1) {
              res.data.data.data.map(item => {
                item.choose = false
              })
            }

            if (num == 1) {
              this.listData = []
            }

            this.pageData = res.data

            this.listData = this.listData.concat(res.data.data.data)
            this.mescroll.endByPage(
              res.data.data.data.length,
              res.data.data.last_page
            )
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding-bottom: 400rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hd-card {
    margin: 0 auto;
    width: 690rpx;
    height: 192rpx;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 30rpx;
    position: relative;

    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }

    .num {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin: 10rpx 0;

      .icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
      }

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #fdf1d2;
    }

    .join {
      display: flex;
      align-items: center;

      .icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #ffffff;
    }

    .big-coin {
      width: 124rpx;
      height: 124rpx;
      position: absolute;
      top: 50%;
      right: 30rpx;
      transform: translateY(-50%);
    }
  }
  .common_bg {
  }

  .tab {
    margin-top: 30rpx;
    white-space: nowrap;

    .tab-item {
      width: 202rpx;
      height: 68rpx;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-left: 30rpx;
      filter: grayscale(1);

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      text-shadow: 0 0 3px #000000, 0 0 3px #000000, 0 0 3px #000000,
        0 0 3px #000000;

      &:last-child {
        margin-right: 30rpx;
      }

      &.act {
        filter: grayscale(0);
      }
    }
    .common_bg {
    }
  }

  .list {
    padding: 10rpx 20rpx 0;

    .list-item {
      width: 690rpx;
      height: 142rpx;
      background: #252525;
      border: 2rpx solid #444444;
      box-sizing: border-box;
      padding: 30rpx;
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      position: relative;

      .check {
        position: absolute;
        z-index: 1;
        left: 20rpx;
        top: 20rpx;
        width: 32rpx;
        height: 32rpx;
      }

      .coin {
        width: 122rpx;
        height: 122rpx;
        position: relative;
        // z-index: 1;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        padding-left: 30rpx;

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #ffffff;
        }

        .open-num {
          margin-top: 6rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
        }

        .num {
          margin-top: 6rpx;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #999999;
        }
      }

      .share-btn {
        width: 132rpx;
        height: 52rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .share-ing {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;

        .share-num {
          display: flex;
          align-items: center;

          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;

          text {
            color: #e40d1d;
          }
        }

        .progress {
          width: 150rpx;
          margin-top: 10rpx;

          /deep/.cmd-progress-inner {
            background-color: rgba(255, 255, 255, 0.2);
          }
        }
      }

      .share-end {
        padding-right: 20rpx;

        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }
    .common_bg {
    }
  }

  .mix-fixed {
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 370rpx;
    box-sizing: border-box;
    padding: 0 30rpx;

    .title {
      padding-top: 30rpx;

      text {
        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 36rpx;
        color: #e40d1d;
        text-shadow: 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff,
          0 0 4px #ffffff;
      }
    }

    .rule {
      margin-top: 20rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }

    .coin-num {
      margin-top: 30rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }

    .btn-lsit {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;

      .btn {
        width: 156rpx;
        height: 78rpx;
      }

      .large {
        width: 330rpx;
        height: 78rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;

        text {
          font-family: PingFang SC, PingFang SC;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style>
